<template>
	<div>
		<CityHeader></CityHeader>
		<CitySearch></CitySearch>
		<CityList :cities="cities" :hot="hotCities"></CityList>
	</div>
</template>
<script>
import CityHeader from './components/Header'
import CitySearch from './components/Search'
import CityList from './components/List'
export default {
	name: 'City',
	components: {
		CityHeader,
		CitySearch,
		CityList
	},
	data () {
		return {
			hotCities: [],
			cities: {}
		}
	},
	methods: {
		getCityList () {
			this.$api.getData.getCity()
			.then(res => {
				if (res.ret) {	
					const data = res.data			
					this.hotCities = data.hotCities
					this.cities = data.cities
				}
			})
		}
	},
	mounted () {
		this.getCityList()
	}
}
</script>
<style lang="scss" scoped>

</style>